<template>
  <div>
    <!--    v-for 更新监测-->
    <ul>
      <li v-for="(val, index) in arr" :key="index">
        {{ val }}
      </li>
    </ul>
    <button @click="revBtn">数组翻转</button>
    <button @click="sliceBtn">截取前3个</button>
    <button @click="updateBtn">更新第一个元素值</button>
    <ul>
      <li v-for="(val, ind) in arr1" :key="ind">
        {{ val }}
      </li>
    </ul>
    <button @click="btn1">下标1位置插入新来的</button>
    <ul>
      <li v-for="obj in arr2" :key="obj.id">
        {{ obj.name }}
        <label>
          <input type="text">
        </label>
      </li>
    </ul>
    <button @click="btn2">下标1位置插入新来的</button>
    <hr/>

    <!-- 语法:
      :class="{类名: 布尔值}"
      使用场景: vue变量控制标签是否应该有类名
     -->
    <p :class="{red_str: bool}">动态class</p>
    <!-- 动态style语法
      :style="{css属性名: 值}"
     -->
    <p :style="{backgroundColor: colorStr}">动态style</p>
    <hr/>

    <!--    过滤器-->
    <p>原来的样子: {{ msg }}</p>
    <!-- 2. 过滤器使用
      语法: {{ 值 | 过滤器名字 }}
     -->
    <p>使用全局过滤器: {{ msg | reverse }}</p>
    <p>使用局部过滤器: {{ msg | toUp }}</p>
    <p>使用全局过滤器: {{ msg | reverse('|') }}</p>
    <p>混合使用过滤器: {{ msg | toUp | reverse('|') }}</p>
    <hr/>

    <!--    计算属性-->
    <p>{{ num }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ getMessage() }}</p>
    <p>{{ getMessage() }}</p>
    <p>{{ getMessage() }}</p>
    <span>姓名:</span>
    <label>
      <input type="text" v-model="full">
    </label>
    <hr/>

    <!--    监听器-->
    <label>
      <input type="text" v-model="name">
      <input type="text" v-model="user.name">
      <input type="text" v-model="user.age">
    </label>
  </div>
</template>

<script>
export default {
  name: "BasicApiTwo",
  data() {
    return {
      user: {
        name: "",
        age: 0
      },
      name: "",
      a: 10,
      b: 20,
      msg: 'python',
      bool: true,
      colorStr: 'red',
      arr: [5, 3, 9, 2, 1],
      arr1: ['老大', "老二", '老三'],
      arr2: [
        {
          name: '大',
          id: 50
        },
        {
          name: '二',
          id: 31
        },
        {
          name: '三',
          id: 10
        }
      ]
    }
  },
  // 计算属性:
  // 场景: 一个变量的值, 需要用另外变量计算而得来
  /*
    语法:
    computed: {
      计算属性名 () {
        return 值
      }
    }
  */
  // 注意: 计算属性和data属性都是变量-不能重名
  // 注意2: 函数内变量变化, 会自动重新计算结果返回
  computed: {
    num() {
      return this.a + this.b
    },
    reverseMessage() {
      console.log("计算属性执行了");
      return this.msg.split("").reverse().join("")
    },
    full: {
      // 给full赋值触发set方法
      set(val) {
        console.log(val)
      },
      // 使用full的值触发get方法
      get() {
        return "无名氏"
      }
    }
  },
  // 目标: 侦听到name值的改变
  /*
  语法:
    watch: {
      变量名 (newVal, oldVal){
        // 变量名对应值改变这里自动触发
      }
    }
    watch: {
      变量名 (newVal, oldVal){
        // 变量名对应值改变这里自动触发
      },
      变量名: {
        handler(newVal, oldVal){

        },
        deep: true, // 深度侦听(对象里面层的值改变)
        immediate: true // 立即侦听(网页打开handler执行一次)
      }
    }
  */
  watch: {
    // newVal: 当前最新值
    // oldVal: 上一刻值
    name(newVal, oldVal) {
      console.log(newVal, oldVal);
    },
    user: {
      handler(newVal, oldVal) {
        // user里的对象
        console.log(newVal, oldVal);
      },
      deep: true,
      immediate: true
    }
  },
  // 方式2: 局部 - 过滤器
  // 只能在当前vue文件内使用
  /*
     语法:
     filters: {
       过滤器名字 (val) {
         return 处理后的值
       }
     }
  */
  filters: {
    toUp(val) {
      return val.toUpperCase()
    }
  },
  methods: {
    getMessage() {
      console.log("函数执行了");
      return this.msg.split("").reverse().join("")
    },
    revBtn() {
      // 1. 数组翻转可以让v-for更新
      this.arr.reverse()
    },
    sliceBtn() {
      // 2. 数组slice方法不会造成v-for更新
      // slice不会改变原始数组
      // this.arr.slice(0, 3)

      // 解决v-for更新 - 覆盖原始数组
      this.arr = this.arr.slice(0, 3)
    },
    updateBtn() {
      // 3. 更新某个值的时候, v-for是监测不到的
      // this.arr[0] = 1000;

      // 解决-this.$set()
      // 参数1: 更新目标结构
      // 参数2: 更新位置
      // 参数3: 更新值
      this.$set(this.arr, 0, 1000)
    },
    btn1() {
      this.arr1.splice(1, 0, '新来的')
    },
    btn2() {
      this.arr2.splice(1, 0, {
        id: 19,
        name: '新来的'
      })
    }
  }
}
</script>

<style scoped>
.red_str {
  color: red;
}
</style>
